<template class="app">
	<view class="main"> 
        <image src="/static/read/left-triangle.png" class="left-triangle"></image>        
		 <view class="scroll-content">
			   测试
			   测试
			   测试
			 
		 </view> 
		 
		 <view class="action-area">
		 	<view class="bar-line flex">
		 		 <view class="cancel-area " style="width: 40px; display: flex; justify-content: center;padding-top: 5px;"> 取消 </view>
				 <view class="time-area"> 06:00/90:00</view>
		 		 <view class="listen-area " style="width: 40px; display: flex; justify-content: center;padding-top: 5px;"> 试听 </view>
		 	</view> 
			<view class="bar-img-line flex">
				 <view class="bar-img1"> <image src="/static/read/5.png" style="width: 30px;height: 30px;"></image> </view>
				 <view class="bar-img2"> <image src="/static/read/4.png" style="width: 70px;height: 50px;"></image> </view>
				 <view class="bar-img3"> <image src="/static/read/8.png" style="width: 30px;height: 30px;" mode=""></image> </view>
			</view> 
		 	<view class="bar-big-img center" >
		 		 <view class="big-img1">  </view>
		 		 <view class="big-img2">  </view>
		 		 <view class="big-img3">  </view>
		 	</view>
		 	<view class="bar-big-text center">
		 		 <view class="big-text"> 重录 </view>
		 		 <view class="big-text-center"> 继续录制 </view>
		 		 <view class="big-text"> 完成 </view>
		 	</view>
		 </view>
		 
		 
	</view>
</template>


<style>
	.main{
		padding: 0;
	}
	.center{
		   display: flex; justify-content: center;
	    align-items: center;
	}
	.flex{
		     display: flex;
	}
	.bar-line{ color: #898888; font-size: 12px; }
	.time-area{ background: url(/static/read/6.png); background-size: 100% 100%; height: 40px; flex: 1; text-align: center;padding-top: 12px;}
	.bar-img2{ flex: 1; text-align: center;}
	
	.left-triangle{
		position: relative;
		width: 10px;
		height: 20px;
		top: 100px;
	}
	.scroll-content{
		background: #333333;
		color:#FFF;
		height: 60vh;
		padding: 10px;
	}
	.action-area{
		display: none;
		border-radius: 10px 10px 0 0;
		width: 100vw;
		height: 50px;
		background-color: #fff;
	    border-top: 1px solid  #CCC;
	}
	.centerBtn{
		 background-color: #008B8B;  
		 width: 100px;
		 height: 50px;
		 border-radius: 50px; 
		 color: #FFFFFF;
	}
	 
	.big-img1{ background: url(/static/read/7.png); background-size: 100% 100%; width: 50px; height: 50px; }
	.big-img2{ background: url(/static/read/1.png); background-size: 100% 100%; width: 100px; height: 100px;  margin: 0 30px;}
	.big-img3{ background: url(/static/read/3.png); background-size: 100% 100%; width: 50px; height: 50px; } 
	.bar-big-text{ color: #898888; margin: 10px 0px;}
	.big-text-center{margin: 0 60px;}
</style>


<script> 
export default {
		data() {
			 return {
				 list: [
				 					'寒雨连江夜入吴',
				 					'平明送客楚山孤',
				 					'洛阳亲友如相问',
				 					'一片冰心在玉壶'
				],
				 tabs:[
					 {index:1,src:"",activeSrc:"",name:"首页",},
					 {index:2,src:"",activeSrc:"",name:"市场",},
					 {index:3,src:"",activeSrc:"",name:"我的",},
				 ],
				 cur:1,
			 }
		},
		mounted() {
			// ajax 加载数据替换里面的tabs
		}
}
	 
</script>
